{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">

    <title>Document</title>
    <style>
        .layui-form-label {
            width: 120px !important;
            text-align: center !important;
        }

        .layui-input {
            width: 300px;
        }

        .layui-input-block {
            width: 500px;
        }


    </style>

</head>
<body>

<div>
    <form class="layui-form" action="" lay-filler="event" id="dataFrm">
        {% csrf_token %}
        <hr class="layui-border-green">
        <hr class="layui-border-red">
        <hr class="layui-border-green">

        <div class="layui-form-item">
            <label class="layui-form-label">源IP ：</label>
            <div class="layui-input-block" style="width: 372px">

                <select name="remotehostLY" id="remotehostLY" lay-verify="remotehostLY">
                    <option value="">请选择^-^</option>
                </select>

            </div>
        </div>

        <div class="layui-form-item">

            <div id="layerDemoLY" style="margin-top: auto;  ">
                <button type="button" class="layui-btn layui-btn-sm" data-method="notice"><i
                        class="layui-icon layui-icon-add-1"
                        style="font-size: 35px; color: white;"></i> 选择源目录路径
                </button>

            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">源 目录 :</label>
                <div class="layui-input-inline">

                    <input type="text" lay-verify="required" name="path_laiyuan"
                           autocomplete="off"
                           class="layui-input path_laiyuan" id="path_laiyuan">
                </div>
            </div>
        </div>

        <hr class="layui-border-green">
        <hr class="layui-border-red">
        <hr class="layui-border-green">

        <div class="layui-form-item">
            <label class="layui-form-label">目的IP ：</label>
            <div class="layui-input-block" style="width: 372px">

                <select name="remotehostMD" id="remotehostMD" lay-verify="required">
                    <option value="">请选择^-^</option>
                </select>

            </div>
        </div>

        <div class="layui-form-item">

            <div id="layerDemo" style="margin-top: auto;  ">
                <button type="button" class="layui-btn layui-btn-sm" data-method="notice"><i
                        class="layui-icon layui-icon-add-1"
                        style="font-size: 35px; color: white;"></i> 选择目的目录路径
                </button>

            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">目的 目录 :</label>
                <div class="layui-input-inline">

                    <input type="text" lay-verify="required" name="path_mudi"
                           autocomplete="off"
                           class="layui-input path_mudi" id="path_mudi">
                </div>
            </div>
        </div>

        <hr class="layui-border-green">
        <hr class="layui-border-red">
        <hr class="layui-border-green">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button"
                        class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal layui-icon layui-icon-ok"
                        lay-submit lay-filter="doSubmit">添加
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-radius layui-btn-warm layui-btn-lg   layui-icon  layui-icon-refresh">
                    重置
                </button>
            </div>
        </div>
    </form>
</div>

{% csrf_token %}

<!-- 引入核心的js文件-->
<script src="{% static "layui/layui.js" %}"></script>
<script src="{% static "js/password.js" %}"></script>
<script>

    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;

        // 动态获取 远程连接的用户信息  目的主机的
        $.ajax({
            url: 'rsyncremotehostshow',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                //console.log(data);//下面会提到这个data是什么值
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    // console.log(value.name);
                    $('#remotehostMD').append(new Option(value.ip, value.ip));// 下拉菜单里添加元素
                    $('#remotehostLY').append(new Option(value.ip, value.ip));// 下拉菜单里添加元素

                });
                layui.form.render("select");//重新渲染 固定写法
            }
        })


        var URL_tz = ''


        $('#layerDemo .layui-btn').on('click', function () {
            var remotehostMD = $("select[name='remotehostMD']").val();
            //console.log(remotehostMD);
            URL_tz = "/view_dir/?ip=" + remotehostMD + "&dir=/"

            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        $('#layerDemoLY .layui-btn').on('click', function () {
            var remotehostLY = $("select[name='remotehostLY']").val();
            //console.log(remotehostLY);
            URL_tz = "/view_dir/?ip=" + remotehostLY + "&dir=/"

            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        //触发事件
        var active = {

            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                    , title: false //不显示标题栏
                    , closeBtn: false
                    , area: ['1300px', '820px']//定义宽高
                    , shade: 0.8//遮幕
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['取消']
                    , btnAlign: 'c'//按钮排列：居中对齐
                    , moveType: 1 //拖拽模式，0或者1
                    , content: URL_tz  //跳转到想要的界面，这里是我自己项目的跳转界面
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            target: '_blank'
                        });

                    }
                })
            }
        }


        //监听提交
        form.on("submit(doSubmit)", function (data) {
            // 实际使用时的提交信息
            // console.log(data)
            // 源ip
            var remotehostLY = $('#remotehostLY').val();
            // 源 目录
            var path_laiyuan = $('.path_laiyuan').val();

            // 目的 ip
            var remotehostMD = $('#remotehostMD').val();
            // 目的 目录
            var path_mudi = $('.path_mudi').val();
            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
            // 'csrfmiddlewaretoken': csrf_token  ajex跳转的必须要加上这个
            $.ajax({
                type: "post",
                url: "/addrsync/",    // 把html输入的数值传给 后边的py代码处理
                data: {
                    "remotehostLY": remotehostLY,
                    "path_laiyuan": path_laiyuan,
                    "remotehostMD": remotehostMD,
                    "path_mudi": path_mudi,
                    'csrfmiddlewaretoken': csrf_token,
                },
                success(res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 6});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
            setTimeout(function () {
                layer.closeAll("hosts.html");
                //刷新父页面
                parent.location.reload();
            }, 1000);
            return false;
        });


    });
</script>
</body>

</html>

